<template>
  <div class="app-container">
    <el-form :inline="true" size="mini">
      <el-form-item label="材料号">
        <el-input v-model="materialNum" placeholder="请输入材料号"/>
      </el-form-item>
      <el-form-item label="目标区域起始列">
        <el-input v-model="startCol" placeholder="请输入起始列"/>
      </el-form-item>
      <el-form-item label="目标区域终止列">
        <el-input v-model="endCol" placeholder="请输入终止列"/>
      </el-form-item>
    </el-form>
    <storage-info :list="list"
                  :materialNum="materialNum"
                  :startCol="startCol"
                  :endCol="endCol"
                  @startTidy="startTidy">

    </storage-info>
  </div>
</template>

<script>
import StorageInfo from "@/views/basic/components/storageInfo";

export default {
  name: "index",
  components: {StorageInfo},
  data() {
    return {
      search: "",
      list: [],
      colorExplainArray: [
        {
          name: `已选中`, color: '#74ea53'
        },
        {
          name: `锁定`, color: '#909090'
        },
        {
          name: `空闲`, color: '#ffffff'
        },
        {
          name: `未整理`, color: '#22a7ff'
        },
      ],
      targetArea: [],
      selectedArray: [],
      multipleSelection: [],
      isCtrl: false,
      firstKeyIndex: undefined,
      secKeyIndex: undefined,
      materialNum: "",
      startCol: "",
      endCol: "",
    }
  },
  computed: {
    // targetArea() {
    //   let array = this.list.slice(0)
    //   return array
    // }
  },
  methods: {
    handleSelectionChange(val) {
      this.multipleSelection = val;
      this.multipleSelection.map(item => {
        this.list.map((itemFather, index) => {
          if (itemFather.name == item.name && itemFather.selected !== true) {
            this.selectBlock(itemFather, index)
          }
        })
      })
    },
    selectTargetBlock(item, index) {
      if (item.status == `锁定`) {
        return
      }

      // this.keyEvent()
      if (this.isCtrl) {
        this.targetAreaCtrlEvent(item, index)
      }
      this.changeTargetSelectedStatus(item, index)
      // this.selectedArray = this.list.filter((item) =>{
      //   if (item.selected) {
      //     return item
      //   }
      // })
      this.$forceUpdate()
    },
    selectBlock(item, index) {
      if (item.status == `锁定`) {
        return
      }

      // this.keyEvent()
      if (this.isCtrl) {
        this.ctrlEvent(item, index)
      }
      this.changeSelectedStatus(item, index)
      this.selectedArray = this.list.filter((item) => {
        if (item.selected) {
          return item
        }
      })
      this.$forceUpdate()
    },
    keyDown(e) {
      switch (e.keyCode) {
        case 17:
          this.isCtrl = true;
          break;
      }
    },
    keyUp(e) {
      switch (e.keyCode) {
        case 17:
          this.isCtrl = false;
          this.firstKeyIndex = undefined
          this.secKeyIndex = undefined
          break;
      }
    },
    changeTargetSelectedStatus(item, index) {
      if (item.status == `锁定`) {
        return
      }
      if (item.selected) {
        this.targetArea[index].selected = !this.targetArea[index].selected
      } else {
        this.targetArea[index].selected = true
      }
    },
    changeSelectedStatus(item, index) {
      if (item.status == `锁定`) {
        return
      }
      if (item.selected) {
        this.list[index].selected = !this.list[index].selected
      } else {
        this.list[index].selected = true
      }
    },
    targetAreaCtrlEvent(item, index) {
      let start, end
      if (this.firstKeyIndex && this.secKeyIndex) {
        this.firstKeyIndex = this.secKeyIndex
        this.secKeyIndex = index
        if (this.firstKeyIndex > this.secKeyIndex) {
          start = this.secKeyIndex
          end = this.firstKeyIndex
        } else {
          start = this.firstKeyIndex
          end = this.secKeyIndex
        }
        if (end - start > 1) {
          for (let i = start + 1; i <= end - 1; i++) {
            this.changeTargetSelectedStatus(this.targetArea[i], i)
          }
        }
      } else if (this.firstKeyIndex !== undefined && this.secKeyIndex == undefined) {
        this.secKeyIndex = index
        if (this.firstKeyIndex > this.secKeyIndex) {
          start = this.secKeyIndex
          end = this.firstKeyIndex
        } else {
          start = this.firstKeyIndex
          end = this.secKeyIndex
        }
        if (end - start > 1) {
          for (let i = start + 1; i <= end - 1; i++) {
            this.changeTargetSelectedStatus(this.targetArea[i], i)
          }
        }
      } else {
        this.firstKeyIndex = index
      }
    },
    ctrlEvent(item, index) {
      let start, end
      if (this.firstKeyIndex && this.secKeyIndex) {
        this.firstKeyIndex = this.secKeyIndex
        this.secKeyIndex = index
        if (this.firstKeyIndex > this.secKeyIndex) {
          start = this.secKeyIndex
          end = this.firstKeyIndex
        } else {
          start = this.firstKeyIndex
          end = this.secKeyIndex
        }
        if (end - start > 1) {
          for (let i = start + 1; i <= end - 1; i++) {
            this.changeSelectedStatus(this.list[i], i)
          }
        }
      } else if (this.firstKeyIndex !== undefined && this.secKeyIndex == undefined) {
        this.secKeyIndex = index
        if (this.firstKeyIndex > this.secKeyIndex) {
          start = this.secKeyIndex
          end = this.firstKeyIndex
        } else {
          start = this.firstKeyIndex
          end = this.secKeyIndex
        }
        if (end - start > 1) {
          for (let i = start + 1; i <= end - 1; i++) {
            this.changeSelectedStatus(this.list[i], i)
          }
        }
      } else {
        this.firstKeyIndex = index
      }
    },
    startTidy() {
      this.$message.success('开始整库')
    }
  },
  mounted() {
    window.addEventListener("keydown", this.keyDown, true)
    window.addEventListener("keyup", this.keyUp, true);
    this.list = [{
      date: '111112',
      name: 'A0101011',
      status: '未整理',
      layer: 1
    }, {
      date: '11111',
      name: 'A0101021',
      status: '已整理',
      layer: 1
    }, {
      date: '11112',
      name: 'A0101041',
      status: '在库',
      layer: 1
    }, {
      date: '11111',
      name: 'A0101012',
      status: '未整理',
      layer: 1
    }, {
      date: '11111',
      name: 'A0101022',
      status: '在库',
      layer: 1
    }, {
      date: '11112',
      name: 'A0102011',
      status: '未整理',
      layer: 1
    }, {
      date: '11111',
      name: 'A0102021',
      status: '在库',
      layer: 1
    }, {
      date: '11111',
      name: 'A0102012',
      status: '锁定',
      layer: 1
    }, {
      date: '11112',
      name: 'A0102031',
      status: '在库',
      layer: 1
    }, {
      date: '11111',
      name: 'A0103011',
      status: '未整理',
      layer: 1
    }, {
      date: '11111',
      name: 'A0103021',
      status: '已整理',
      layer: 1
    }, {
      date: '11112',
      name: 'A0103031',
      status: '在库',
      layer: 1
    }, {
      date: '11111',
      name: 'A0103012',
      status: '在库',
      layer: 1
    }, {
      date: '11111',
      name: 'A0104011',
      status: '已整理',
      layer: 2
    }, {
      date: '11112',
      name: 'A0104021',
      status: '在库',
      layer: 2
    }]
  },
  beforeDestroy() {
    window.removeEventListener("keydown", this.keyDown)
    window.removeEventListener("keyup", this.keyUp)
  }
}
</script>

<style scoped>
.storage-block {
  min-width: 400px;
  border: 2px solid #909090;
  padding: 15px;
  display: grid;
  /*grid-template-columns: auto auto auto;*/
  /*grid-template-rows: auto auto auto;*/
  grid-template-columns: repeat(6, auto);
  grid-template-rows: repeat(4, auto);

  /*//padding 有个20的宽度*/
  /*height: 340px;*/
  grid-gap: 10px;
  /*margin-bottom: 60px;*/
}

.item-block {
  width: 30px;
  height: 25px;
  border: 2px solid #909090;
  cursor: pointer;
}

.block-lock {
  background: #909090;
  cursor: not-allowed;
}

</style>
